{% extends "base.html" %}
{% block javascript %}
{% load static %}
<script src="{% static 'js/show_comics.js' %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
{% block css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/show_comics.css' %}">
{% endblock %}
{% block title %}
{{ comics_name }}
{% endblock %}
{% block body %}
<div class="container">
    {% load static %}
    <div class="row">
        <!--漫画封面-->
        <div class="col-md-3 col-sm-4">
            <img class="img-responsive" src="{{ static }}/media/{{comic_cover}}">
        </div>
        <!--漫画名-->
        <div class="col-md-7 col-sm-7">
            <h1>{{ comics_name }}</h1>
        </div>
        <!--漫画简介-->
        <div class="col-md-7 col-sm-7">
            <h4>{{ comics_summary }}</h4>
        </div>
    </div>
    <br>
    <div class="row">
        <!--目录导航-->
        <div class="col-md-12 col-sm-12 ">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active">
                    <a href="javascript:void()">
                        <font size="4px">目录</font>
                        <span id="asc" role="button" class="glyphicon glyphicon-chevron-up "></span>
                        <span id="des" role="button" class="glyphicon glyphicon-chevron-down hidden"></span>
                    </a>
                </li>
            </ul>
            <!--目录-->
            <div id="catalog">
                {% for catalog in comics_catalog %}
                <div class="col-md-4 col-sm-6">
                    <a href="/{{ comics_id }}_{{ catalog }}" class="btn btn-lg" role="button"><span>{{ catalog }} </span></a>
                </div>
                {% endfor%}
            </div>
        </div>
    </div>
</div>
{% endblock %}
